<template>
  <div class="rich-text-editor">
    <!-- 工具栏 -->
    <div class="toolbar">
      <button @click="execCommand('bold')" title="加粗">
        <i class="iconfont icon-bold"></i>
      </button>
      <button @click="execCommand('italic')" title="斜体">
        <i class="iconfont icon-italic"></i>
      </button>
      <button @click="execCommand('underline')" title="下划线">
        <i class="iconfont icon-underline"></i>
      </button>
      <button @click="execCommand('strikeThrough')" title="删除线">
        <i class="iconfont icon-strikethrough"></i>
      </button>
      <button @click="execCommand('justifyLeft')" title="左对齐">
        <i class="iconfont icon-align-left"></i>
      </button>
      <button @click="execCommand('justifyCenter')" title="居中对齐">
        <i class="iconfont icon-align-center"></i>
      </button>
      <button @click="execCommand('justifyRight')" title="右对齐">
        <i class="iconfont icon-align-right"></i>
      </button>
      <button @click="execCommand('insertOrderedList')" title="有序列表">
        <i class="iconfont icon-list-ol"></i>
      </button>
      <button @click="execCommand('insertUnorderedList')" title="无序列表">
        <i class="iconfont icon-list-ul"></i>
      </button>
      <button @click="insertLink" title="插入链接">
        <i class="iconfont icon-link"></i>
      </button>
      <button @click="insertImage" title="插入图片">
        <i class="iconfont icon-image"></i>
      </button>
      <button @click="execCommand('removeFormat')" title="清除格式">
        <i class="iconfont icon-eraser"></i>
      </button>
    </div>
    
    <!-- 编辑区域 -->
    <div 
      ref="editor"
      class="editor"
      contenteditable="true"
      @input="updateModel"
      @paste="handlePaste"
    ></div>
    
    <!-- 链接插入对话框 -->
    <div v-if="showLinkDialog" class="dialog-overlay">
      <div class="dialog">
        <h3>插入链接</h3>
        <input v-model="linkUrl" placeholder="输入链接地址" type="text">
        <input v-model="linkText" placeholder="输入链接文本(可选)" type="text">
        <div class="dialog-buttons">
          <button @click="confirmInsertLink">确定</button>
          <button @click="cancelInsertLink">取消</button>
        </div>
      </div>
    </div>
    
    <!-- 图片插入对话框 -->
    <div v-if="showImageDialog" class="dialog-overlay">
      <div class="dialog">
        <h3>插入图片</h3>
        <input v-model="imageUrl" placeholder="输入图片URL" type="text">
        <div class="dialog-buttons">
          <button @click="confirmInsertImage">确定</button>
          <button @click="cancelInsertImage">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RichTextEditor',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showLinkDialog: false,
      showImageDialog: false,
      linkUrl: '',
      linkText: '',
      imageUrl: '',
      lastSelection: null
    }
  },
  mounted() {
    this.$refs.editor.innerHTML = this.modelValue;
  },
  methods: {
    execCommand(command, value = null) {
      document.execCommand(command, false, value);
      this.saveSelection();
    },
    
    saveSelection() {
      this.lastSelection = window.getSelection();
    },
    
    restoreSelection() {
      if (this.lastSelection) {
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(this.lastSelection);
      }
    },
    
    updateModel() {
      this.$emit('update:modelValue', this.$refs.editor.innerHTML);
    },
    
    handlePaste(e) {
      e.preventDefault();
      const text = (e.clipboardData || window.clipboardData).getData('text');
      document.execCommand('insertText', false, text);
    },
    
    insertLink() {
      this.saveSelection();
      this.showLinkDialog = true;
      this.linkUrl = '';
      this.linkText = '';
    },
    
    confirmInsertLink() {
      this.restoreSelection();
      const linkText = this.linkText || this.linkUrl;
      document.execCommand('createLink', false, this.linkUrl);
      // 如果创建链接后选中的是整个链接，我们需要取消选中以便继续编辑
      const selection = window.getSelection();
      if (selection.anchorNode.parentNode.href === this.linkUrl) {
        const range = document.createRange();
        range.selectNodeContents(selection.anchorNode);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      this.cancelInsertLink();
    },
    
    cancelInsertLink() {
      this.showLinkDialog = false;
      this.linkUrl = '';
      this.linkText = '';
    },
    
    insertImage() {
      this.showImageDialog = true;
      this.imageUrl = '';
    },
    
    confirmInsertImage() {
      this.restoreSelection();
      document.execCommand('insertImage', false, this.imageUrl);
      this.cancelInsertImage();
    },
    
    cancelInsertImage() {
      this.showImageDialog = false;
      this.imageUrl = '';
    },
    
    setHTML(html) {
      this.$refs.editor.innerHTML = html;
      this.updateModel();
    },
    
    getHTML() {
      return this.$refs.editor.innerHTML;
    }
  }
}
</script>

<style scoped>
.rich-text-editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}

.toolbar {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}

.toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  padding: 5px;
  margin: 2px;
  font-size: 14px;
}

.toolbar button:hover {
  background-color: #e0e0e0;
  border-color: #adadad;
}

.editor {
  min-height: 300px;
  padding: 10px;
  outline: none;
  overflow-y: auto;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  max-width: 90%;
}

.dialog h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.dialog input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-buttons button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.dialog-buttons button:hover {
  background-color: #e0e0e0;
}
</style>